<script setup>
  import {ref, reactive, defineEmits, defineProps, watch} from 'vue'
  const dialogVisible = ref(false)

  const props = defineProps({
    modelValue: {
      type: Boolean,
      required: true
    }
  })

  const emits = defineEmits(["update:modelValue"])

  const tag = ref("assistant")

  watch(props, (newValue, oldValue) => {
    dialogVisible.value = newValue.modelValue
  })

  const handleClose = (done) => {
    done()
  }

  const close = () => {
    emits("update:modelValue", false)
  }

  const assistantRef = ref()
  const retrievalRef = ref()
  const modelRef = ref()

  const formData = reactive({

  })

  const rules = {

  }
</script>

<template>
  <el-dialog
      v-model="dialogVisible"
      title="聊天设置"
      width="600"
      :before-close="handleClose">
    <el-tabs type="border-card" v-model="tag">
      <el-tab-pane label="助理设置" name="assistant">
        <el-form ref="assistantRef" :model="formData" :rules="rules" label-width="120px">
          <el-form-item label="助理名称" >
            <el-input />
          </el-form-item>
          <el-form-item label="助理描述" >
            <el-input />
          </el-form-item>
          <el-form-item label="助理头像" >
            <el-input />
          </el-form-item>
          <el-form-item label="空回复" >
            <el-input />
          </el-form-item>
          <el-form-item label="开场白" >
            <el-input />
          </el-form-item>
          <el-form-item label="显示引文" >
            <el-switch></el-switch>
          </el-form-item>
          <el-form-item label="关键词分析" >
            <el-switch></el-switch>
          </el-form-item>
          <el-form-item label="文本转语音" >
            <el-switch></el-switch>
          </el-form-item>
          <el-form-item label="知识库" >
            <el-select placeholder="请选择">
            </el-select>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="提示引擎" name="retrieval">
        <el-form ref="retrievalRef" :model="formData" :rules="rules" label-width="120px">
          <el-form-item label="系统提示词" >
            <el-input type="textarea" :rows="5" />
          </el-form-item>
          <el-form-item label="相似度阈值" >
            <el-slider></el-slider>
          </el-form-item>
          <el-form-item label="关键字相似度权重" >
            <el-slider></el-slider>
          </el-form-item>
          <el-form-item label="Top N" >
            <el-slider></el-slider>
          </el-form-item>
          <el-form-item label="多轮对话优化" >
            <el-switch></el-switch>
          </el-form-item>
          <el-form-item label="推理" >
            <el-switch></el-switch>
          </el-form-item>
          <el-form-item label="Rerank模型" >
            <el-select></el-select>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="模型设置" name="model">
        <el-form ref="modelRef" :model="formData" :rules="rules" label-width="100px">
          <el-form-item label="模型" >
            <el-select ></el-select>
          </el-form-item>
          <el-card>
            <template #header>
              <div style="display: flex; justify-content: space-between">
                <div style="width: 100px">
                  <h1>自由</h1>
                </div>
                <div style="width: 200px">
                  <el-select></el-select>
                </div>
              </div>
            </template>
            <div>
              <el-form-item label="温度" style="display: flex" >
                <div>
                  <el-switch></el-switch>
                </div>
                <div style="width: 50%; margin-left: 20px">
                  <el-slider></el-slider>
                </div>
              </el-form-item>
              <el-form-item label="Top P" style="display: flex">
                <div>
                  <el-switch></el-switch>
                </div>
                <div style="width: 50%; margin-left: 20px">
                  <el-slider></el-slider>
                </div>
              </el-form-item>
              <el-form-item label="存在处罚" style="display: flex" >
                <div>
                  <el-switch></el-switch>
                </div>
                <div style="width: 50%; margin-left: 20px">
                  <el-slider></el-slider>
                </div>
              </el-form-item>
              <el-form-item label="频率惩罚" style="display: flex" >
                <div>
                  <el-switch></el-switch>
                </div>
                <div style="width: 50%; margin-left: 20px">
                  <el-slider></el-slider>
                </div>
              </el-form-item>
              <el-form-item label="最大token数" style="display: flex" >
                <div>
                  <el-switch></el-switch>
                </div>
                <div style="width: 50%; margin-left: 20px">
                  <el-slider></el-slider>
                </div>
              </el-form-item>
            </div>
          </el-card>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close">Cancel</el-button>
        <el-button type="primary" @click="close">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>